<!DOCTYPE html>
<meta charset="UTF-8">
<style type="text/css">
.bodyClsTest {
	overflow: auto;
	border-left: 1px solid blue !important;
	border-right: 1px solid blue !important;
	border-top: 1px solid blue !important;
	border-bottom: 1px solid blue !important;
}

.headerClsTest {
	border-left: 1px solid blue !important;
	border-right: 1px solid blue !important;
	border-top: 0px solid blue !important;
	border-bottom: 1px solid blue !important;
}

</style>
<div class="demo-info">
	<div class="demo-tip icon-tip"></div>
	<div>增加删除导航条.</div>
</div>
<div style="margin: 10px 0;">
	<a href="javascript:void(0)" data-type="linkbutton" onclick="select()">选择</a>
	<a href="javascript:void(0)" data-type="linkbutton" onclick="add()">新增</a>
	<a href="javascript:void(0)" data-type="linkbutton" onclick="remove()">删除</a>
</div>
<div id="aa" data-type="accordion" style="width: 500px; height: 300px;">
	<div title="关于" data-define="iconCls:'icon-ok',bodyCls:'bodyClsTest',headerCls:'headerClsTest'"
		style="overflow: auto; padding: 10px;">
		<h3 style="color: #0099FF;">jQuery 导航条</h3>
	</div>
</div>
<script type="text/javascript">
	function select() {
	    $.messager.prompt('Prompt', '请输入导航条名称:', function(s) {
		    if (s) {
			    $('#aa').accordion('select', s);
		    }
	    });
    }
    var idx = 1;
    function add() {
	    $('#aa').accordion('add', {
	        title : '标题' + idx,
	        content : '测试导航条' + idx,
	        bodyCls:'bodyClsTest',
	        headerCls:'headerClsTest'
	    });
	    idx++;
    }
    function remove() {
	    var pp = $('#aa').accordion('getSelected');
	    if (pp) {
		    var index = $('#aa').accordion('getPanelIndex', pp);
		    $('#aa').accordion('remove', index);
	    }
    }
</script>
